import CustomComponent from '@comp/hhd/design/FormDesigner/field/comps/custom/CustomComponent';
import $ from 'jquery';
import {guid} from '@/utils';

export default class Title1 extends CustomComponent {
  getFieldComponentTitle() {
    return '标题组件(1)';
  }

  getFieldComponentName() {
    return 'title1';
  }

  setFieldTitle(el, fieldConfig) {
    $(el).find('.title1').html(fieldConfig.title);
  }

  getDefaultConfig() {
    return new Promise((resolve, reject) => {
      resolve(createDefaultButtonConfig());
    });
  }

  createFieldElement() {
    return new Promise((resolve, reject) => {
      resolve(createTitleElement());
    });
  }
}

function createTitleElement() {
  return $(`<div style="border-top: 2px solid #2e84e7">
    <div style="height: 35px;  color: white; display: flex; justify-content: center ;align-items: center; width: fit-content; padding: 0 20px 0 10px; position: relative">
      <div style="z-index: 3; background: #2e84e7;position: absolute; left: 8px; top: 0; width: 100%; height: 100%; transform: skew(-20deg);"></div>
      <div style="z-index: 2; position: absolute; right: -12px; top: 0; width: 0; height: 0; border-left: 0; border-left: 30px solid transparent; border-bottom: 35px solid #d5e6fa; transform: skew(-10deg);"></div>
      <div style="z-index: 5; position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 0; border-right: 13px solid transparent; border-top: 35px solid #2e84e7; "></div>
      <div style="z-index: 10; margin-left: 20px" class="title1">
        标题名称
      </div>
    </div>
  </div>`)[0];
}

export function createDefaultButtonConfig() {
  return {
    id: guid(),
    component: 'title1',
    title: '标题名称',
    customComponent: true,
    viewComponent: true
  };
}